<div class="row" ng-show="error">
	<div class="col-lg-12">
		<div class="alert alert-danger" ng-bind="error"></div>
	</div>
</div>
<div ng-show="incident && state">
	<div class="row">
		<h3>
			<span title="This exclamation icon represents that the alert of this incident is in an active (non-normal) state." ng-show="isActive" class="fa fa-exclamation-circle"></span>
			<a ng-href="{{editSilenceLink}}" title="This mute icon represents that the alert of this incident has been silenced until {{time(silence.End)}} UTC." ng-show="silence" class="fa fa-volume-off"></a>
			Incident {{incident.Id}} <span ng-show="incident.NeedAck"> - needs acknowledgement</span>
		</h3>
	</div>
	<div class="row">
		<p ng-show="incident.End">End Time:<span ts-time="incident.Start" ts-end-time="incident.End" no-link="true"></span></p>
	</div>
	<div class="row">
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Alert Key:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="incident.AlertKey" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Start Time:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ts-time="incident.Start" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Current Status:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="incident.CurrentStatus" /> since <span ts-time="incident.Time" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Last Abnormal Status:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="incident.LastAbnormalStatus" /> since <span ts-time-unix="incident.LastAbnormalTime" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Views:</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-href="/history?key={{encode(incident.AlertKey)}}">Full History</a>,
					<a ng-href="{{configLink}}">Rule Editor</a>,
					<a ng-href="/expr?expr={{btoa(incident.Expr)}}">Expression</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Previous Incidents ({{ incident.PreviousIds ? incident.PreviousIds.length : 0 }}):</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-repeat="id in incident.PreviousIds | limitTo:5" ng-href="/incident?id={{encode(id)}}">#{{id}} </a>
					<p ng-hide="incident.PreviousIds">None</p>
				</div>
			</div>
			<div class="row" ng-hide="incident.NextId == 0">
				<div class="col-sm-3">
					<p><strong>Next Incident:</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-href="/incident?id={{encode(incident.NextId)}}">#{{incident.NextId}}</a>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Silence:</strong></p>
				</div>
				<div class="col-sm-9">
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=1h&alert={{incident.Alert}}&tags={{encode(incident.Tags)}}">1 hour</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=2h&alert={{incident.Alert}}&tags={{encode(incident.Tags)}}">2 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=6h&alert={{incident.Alert}}&tags={{encode(incident.Tags)}}">6 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=12h&alert={{incident.Alert}}&tags={{encode(incident.Tags)}}">12 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=24h&alert={{incident.Alert}}&tags={{encode(incident.Tags)}}">24 hours</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Actions:</strong></p>
				</div>
				<div class="col-sm-9" ng-if="state.AlertKey">
					<ts-note></ts-note>
					<ts-ack></ts-ack>
					<ts-close></ts-close>
					<ts-force-close></ts-force-close>
					<ts-forget ng-if="group.Status == 'unknown'"></ts-forget>
					<ts-purge></ts-purge>
				</div>
			</div>
			<div class="row" ng-show="incident.LastAction">
				<div class="col-sm-3">
					<p><strong>Last Action:</strong></p>
				</div>
				<div class="col-sm-9">
					{{incident.LastAction.Type}}
					<span ng-show="incident.LastAction.User">by {{incident.LastAction.User}}</span> at <span ts-time="incident.LastAction.Time"></span>
					<span ng-show="incident.LastAction.Message">: {{incident.LastAction.Message}}</span>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<h4>Actions</h4>
	</div>
	<div class="row" ng-hide="actions.length">No actions</div>
	<div class="row" ng-show="actions.length">
		<table class="table table-striped" style="width:100%">
			<thead>
				<td>Type</td>
				<td>User</td>
				<td>Message</td>
				<td>Time</td>
				<td>Deadline</td>
			</thead>
			<tbody>
				<tr ng-repeat="a in actions">
					<td ng-bind="a.Type"></td>
					<td ng-bind="a.User"></td>
					<td ng-bind="a.Message"></td>
					<td><div ng-show="a.Time" ts-time="a.Time"></div></td>
					<td><div ng-show="a.Deadline" ts-time="a.Deadline"></div></td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="row">
		<h4>Events</h4>
	</div>
	<div class="row panel" ng-class="panelClass(v.Status)" ng-repeat="($index, v) in events">
		<div class="panel-heading" ng-click="collapse($index, v)">
			<h4 class="panel-title">
				<a href>
					<span ng-bind="v.Status"></span>
					<span class="pull-right" ng-show="v.Time" ts-time="v.Time" ts-end-time="events[$index-1].Time ? events[$index-1].Time : (incident.Open ? undefined : incident.End) " no-link="true"></span>
				</a>
			</h4>
		</div>
		<div class="panel-body" ng-if="shown[$index]">
			<div ng-show="!v.doneLoading">Loading...</div>
			<div class="row" ng-show="v.error">
				<div class="col-lg-12">
					<pre class="alert alert-danger" ng-bind="v.error" style="white-space: pre-wrap;"></pre>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Subject</h3>
				</div>
				<div class="panel-body template" ng-bind="v.subject"></div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Body</h3>
				</div>
				<div class="panel-body template" ng-bind-html="v.body"></div>
			</div>
		</div>
	</div>
</div>